<template>
  <BasicModal
    v-bind="$attrs"
    @register="register"
    destroyOnClose
    title="添加收款信息"
    width="700px"
    @click="handleOk"
  >
    <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
      <a-form-item
        label="收款姓名"
        name="name"
        :rules="[{ required: true, message: '请输入收款姓名' }]"
      >
        <a-input v-model:value="formState.name" placeholder="请输入收款姓名" />
      </a-form-item>
      <a-form-item
        label="收款账号"
        name="card"
        :rules="[{ required: true, message: '请输入收款账号' }]"
      >
        <a-input v-model:value="formState.card" placeholder="请输入收款账号" />
      </a-form-item>
      <a-form-item
        label="收款类型"
        name="type"
        :rules="[{ required: true, message: '请选择收款类型' }]"
      >
        <a-select v-model:value="formState.type" :options="options" placeholder="请选择收款类型" />
      </a-form-item>
      <a-form-item
        label="银行名称"
        name="bankId"
        help="注意: 请如实填写报备信息，此项内容将严格审核。如核查到代付的付款信息与报备信息不符将不返代付余额，一定要如实报备，否则造成损失自行承担。"
        v-show="formState.type === 2"
      >
        <a-select
          v-model:value="formState.bankId"
          :options="bankList"
          placeholder="请选择银行名称"
        />
      </a-form-item>
      <a-form-item name="qrcode" label="收款二维码">
        <a-upload
          :max-count="1"
          v-model:file-list="fileList"
          list-type="picture"
          :beforeUpload="uploadFunc"
          @remove="handleFileRemove"
          style="width: 100%"
        >
          <a-button style="width: 100%" block type="primary">
            <upload-outlined />
            请上传二维码
          </a-button>
        </a-upload>
      </a-form-item>
      <a-form-item name="remark" label="备注信息">
        <a-textarea :rows="3" v-model:value="formState.remark" placeholder="请输入备注信息" />
      </a-form-item>
    </a-form>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { onMounted, ref } from 'vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
  import { BindPaymentApi, GetBankListApi } from '@/api/finance';
  import message from '@/views/form-design/utils/message';
  import { uploadApi } from '@/api/sys/upload';

  const bankList: { label: string; value: number | string }[] = [];
  onMounted(async () => {
    const data = await GetBankListApi();
    Object.keys(data.list).forEach((key) => {
      bankList.push({
        label: data.list[key],
        value: key,
      });
    });
  });

  const formRef = ref();
  const formState = ref({
    name: '',
    type: null,
    qrcode: '',
    card: '',
    bankId: null,
    remark: '',
  });
  const fileList = ref([]);
  const options = ref([
    {
      value: 0,
      label: '微信',
    },
    {
      value: 1,
      label: '支付宝',
    },
    {
      value: 2,
      label: '银行卡',
    },
    {
      value: 3,
      label: 'USDT-TRC20',
    },
  ]);

  const rules = {
    name: [{ required: true, message: '请输入收款姓名' }],
    card: [{ required: true, message: '请输入收款账号' }],
    type: [{ required: true, message: '请选择收款类型' }],
  };

  const [register, { closeModal }] = useModalInner();

  const handleOk = () => {
    submitFunc();
  };

  const submitFunc = () => {
    formRef.value
      .validate()
      .then((e) => {
        console.log(e);
        BindPaymentApi(e).then(() => {
          message.success('添加成功');
          closeModal();
        });
      })
      .catch((error) => {
        console.log('error', error);
      });
  };

  const uploadFunc = (file) => {
    uploadApi({
      file: file,
      filename: file.name,
    }).then((res) => {
      const { data } = res;
      if (data.code === 1) {
        fileList.value[0].status = 'done';
        fileList.value[0].response = data.data.file;
        formState.value.qrcode = data.data.file.full_url;
        message.success(data.msg);
      } else {
        fileList.value[0].status = 'error';
        message.error(data.msg);
      }
    });
    return false;
  };

  const handleFileRemove = () => {
    formState.value.qrcode = null;
  };
</script>
<style scoped>
  :deep(.ant-upload.ant-upload-select.ant-upload-select-picture) {
    width: 100% !important;
  }
</style>
